<template>
  <div class="lunarFullCalendar">
    <div class="full-calendar">
      <lunar-full-calendar :events="events" ref="calendar" @event-selected="eventSelected" :config="config" @day-click="dayClick"></lunar-full-calendar>
    </div>
    <Add v-model="addModal" @add="addEvents" />
    <Detail v-model="infoModal" :info="form" @showEdit="showEditModel" @onDelete="onDelete" />
    <Edit v-model="editModel" :editInfo="editInfo" />
  </div>
</template>
<script>
// import { LunarFullCalendar } from 'vue-lunar-full-calendar'
import { LunarFullCalendar } from '../../components'
// import { LunarFullCalendar } from '../../lib/LunarFullCalendar.min.js'
import Detail from '@/views/components/detail.vue'
// import Add from '@/views/components/add.vue'
import Add from '@/views/components/adds.vue'
import Edit from '@/views/components/edit'
import customViewPlugin from './custom-view-file.js'

import dayjs from 'dayjs'
export default {
  components: {
    LunarFullCalendar,
    Detail,
    Add,
    Edit
  },
  data: function () {
    let self = this
    return {
      form: {},
      editInfo: {},
      addModal: false,
      infoModal: false,
      editModel: false,
      events: [
        {
          id: 1,
          title: '数据1',
          description: 'jhg看过是偶搜哦',
          allDay: true,
          start: new Date(),
          taskLevel: '一级'
        },
        {
          id: 2,
          title: '数据2',
          description: 'jhg看过是偶搜哦',
          taskLevel: '一级',
          start: new Date().getTime() + 24 * 60 * 60 * 1000,
          end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
        },
        {
          id: 3,
          title: '数据3',
          description: 'jhg看过是偶搜哦',
          taskLevel: '一级',
          start: new Date().getTime() - 3 * 24 * 60 * 60 * 1000
        },

        {
          id: 4,
          title: '数据4（增加中国农历、24节气和节假日的问题）',
          description: 'jhg看过是偶搜哦',
          taskLevel: '一级',
          start: new Date(),
          end: new Date().getTime() + 30 * 24 * 60 * 60 * 1000
        },
        {
          id: 5,
          title:
            '数据5（Increase the functions of Chinese lunar calendar, 24 solar terms and holidays）',
          description: 'jhg看过是偶搜哦',
          taskLevel: '一级',
          start: new Date(),
          end: new Date().getTime() + 30 * 24 * 60 * 60 * 1000
        },
        {
          id: 6,
          title:
            '数据6（增加中国农历、24节气和节假日的问题Increase the functions of Chinese lunar calendar, 24 solar terms and holidays）',
          description: 'jhg看过是偶搜哦',
          taskLevel: '一级',
          start: new Date() - 30 * 24 * 60 * 60 * 1000,
          end: new Date().getTime()
        }
      ],
      config: {
        // lunarCalendar
        // Control whether the Chinese calendar shows true, unrealistic flase, default true.（lunarCalendar控制是否显示中国农历、显示的为true，隐藏为flase，默认为true）
        lunarCalendar: true,
        height: 'parent',
        locale: 'zh-cn',
        buttonText: {
          today: '今天',
          custom: '年视图',
          month: '月',
          week: '周',
          day: '日',
          list: '列表'
        },
        header: {
          left: 'prev,next, today',
          center: 'title',
          right: 'hide,custom, month,agendaWeek,agendaDay,listDay'
        },
        // plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin, customViewPlugin],
        plugins: [customViewPlugin],

        // eventOrder:'index',   // 这个是控制事件排序的功能，意思是 按照字段 事件数据中index来排序
        // eventLimitClick: 'day', //点击今天日列表图
        eventLimit: true, // 一天中显示多少条事件，多了隐藏
        firstDay: 0, // 控制周一周日那个在前面
        defaultView: 'month',
        allDaySlot: true, // agenda视图下是否显示all-day
        allDayText: '全天', // agenda视图下all-day的显示文本
        timezone: 'local', // 时区默认本地的
        slotLabelFormat: 'HH:mm', // 周视图和日视同的左侧时间显示
        viewRender (view, element) {
          self.viewRender(view, element)
        },
        customButtons: {
          // 新增按钮
          hide: {
            text: '隐藏农历',
            click: function () {
              self.$refs.calendar.fireMethod('option', {
                lunarCalendar: false
              })
              self.$refs.calendar.fireMethod('option', {
                header: {
                  left: 'prev,next, today',
                  center: 'title',
                  right: 'show, custom, month,agendaWeek,agendaDay'
                }
              })
            }
          },
          show: {
            text: '显示农历',
            click: function () {
              self.$refs.calendar.fireMethod('option', {
                lunarCalendar: true
              })
              self.$refs.calendar.fireMethod('option', {
                header: {
                  left: 'prev,next, today',
                  center: 'title',
                  right: 'hide, custom, month,agendaWeek,agendaDay'
                }
              })
            }
          }
        }
      }
    }
  },
  filters: {
    dateFilter (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    // 注释的是功能是可以修改对应的功能值属性，比如设置  eventLimit为 false
    //  this.$refs.calendar.fireMethod('option',{
    //      eventLimit :false
    //  })
    dayClick (date, jsEvent, view) {
      // 点击当天的事件
      /*      alert('农历数据：' + JSON.stringify(window.lunar(date._d)))
           console.log(date, jsEvent, 'dayClick') */
      this.addModal = true
    },
    // 选中事件
    eventSelected (event, jsEvent, view) {
      console.log(event, jsEvent, 'eventSelected')
      this.infoModal = true
      this.form = event
      /*       if (event.start.includes(' ')) {
              this.form.startDay = event.startStr.split(' ')[0]
              this.form.startTime = event.startStr.split(' ')[1]
            }
            if (event.endStr.includes(' ')) {
              this.form.endDay = event.endStr.split(' ')[0]
              this.form.endTime = event.endStr.split(' ')[1]
            } */
    },
    viewRender (view, element) {
      console.log(view, element, 'viewRender')
    },
    // 拼接日期时间
    filterDate (day, time) {
      return day + (time ? ' ' : '') + time
    },
    // 添加任务
    addEvents (form) {
      const params = {}
      // console.log('add', form)
      params.id = form.id ? form.id : dayjs().unix()
      params.title = form.title
      params.taskLevel = form.taskLevel.label
      params.description = form.description
      params.start = this.filterDate(form.startDay, form.startTime)
      params.end = this.filterDate(form.endDay, form.endTime)
      this.addModal = false
      this.events.push(params)
    },
    // 删除
    onDelete (id) {
      this.events.forEach((item, index) => {
        if (item.id === id) {
          console.log(index)
          this.events.splice(index, 1)
          this.infoModal = false
        }
      })
    },
    // 跳转到对应日期
    // gotoDate () {
    //   var monthtext = $("#startDate").val()
    //   var date = $.fullCalendar.moment(monthtext)
    //   // console.log(date)
    //   $('#calendar').fullCalendar('gotoDate', date)
    // },
    showEditModel (p) {
      this.editModel = true
      this.editInfo = p
    }
  }
}
</script>
<style lang="scss" scoped>
$color: #1890ff;
.lunarFullCalendar {
  min-width: 900px;
  height: 100%;
  background: #fff;
  .full-calendar {
    padding: 20px;
    padding-left: 0;
    padding-bottom: 0;
    // height: calc(100% - 30px);
    height: 100%;
    /deep/ {
      .fc-unthemed thead,
      .fc-unthemed .fc-content,
      .fc-unthemed th,
      .fc-unthemed td,
      .fc-unthemed tbody,
      .fc-unthemed .fc-row,
      .fc-unthemed .fc-list-view,
      .fc-unthemed .fc-popover,
      .fc-unthemed .fc-divider,
      .fc-unthemed .fc-list-heading td {
        border-color: #eaecf1;
      }
      .fc-header-toolbar {
        height: 30px;
        margin-bottom: 10px;
        line-height: 30px;
        h2 {
          font-size: 24px;
          color: #000;
        }
      }
      .fc-button {
        height: 30px;
        background: #fff;
        border-color: #fff;
        box-shadow: none;
        padding: 0;
      }
      .fc-today-button {
        font-size: 15px;
        color: $color;
      }
      .fc-show-button,
      .fc-hide-button {
        position: relative;
        width: 80px;
        border: 1px solid #bbbfcd;
        border-radius: 20px;
        font-size: 15px;
        color: #000;
      }
      .fc-next-button,
      .fc-prev-button {
        color: #7d8292;
      }
      .fc-button-group {
        margin-left: 20px;
        font-size: 15px;
        button {
          width: 80px;
          color: #000;
          border: 1px solid #bbbfcd;
        }
        button:first-child {
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
        }
        button:last-child {
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
        }
        .fc-state-active {
          background: $color;
          color: #fff;
          text-shadow: none;
        }
      }
      .fc-agendaDay-view,
      .fc-month-view,
      .fc-agendaWeek-view {
        .fc-widget-content {
          .fc-sun,
          .fc-sat {
            background: rgba(245, 246, 248, 0.6);
          }
          .fc-day-number {
            font-size: 15px;
            letter-spacing: 0;
            line-height: 13px;
            float: left;
          }
          .fc-day-top {
            padding: 15px 12px 0 12px;
          }
          .fc-day-cnTerm,
          .fc-day-cnDate {
            font-size: 13px;
            color: #7d8292;
            float: right;
          }
          .fc-more {
            font-size: 12px;
            font-weight: 600;
            color: #7d8292;
          }
          .fc-event {
            cursor: pointer;
            font-size: 13px;
            color: #000;
            background-color: rgba($color: $color, $alpha: 0.15) !important;
            border: 1px solid rgba($color: $color, $alpha: 0.15) !important;
            border-left: 2px solid rgba($color: $color, $alpha: 0.15) !important;
            border-radius: 0;
          }
          .fc-day-grid-event {
            padding: 1px 0 1px 5px;
          }
        }
      }
      .fc-agendaWeek-view {
        .fc-event .fc-bg {
          background: #dbeeff;
          opacity: 1;
        }
        .fc-content {
          .fc-title {
            font-size: 14px;
            color: rgb(3, 6, 15);
          }
        }
      }
      .fc-agendaWeek-view,
      .fc-agendaDay-view {
        .fc-axis {
          font-size: 15px;
        }
        .fc-title {
          font-size: 15px;
          color: $color;
        }
      }
      .fc-month-view {
        .fc-day-grid-event {
          margin-top: 4px;
        }
        .fc-list-heading td {
          background: #edf7ff;
        }
        .fc-more-popover .fc-event-container {
          padding: 4px;
        }
        .fc-event {
          &.fc-not-start {
            border-left: 1px solid rgba($color: $color, $alpha: 0.1) !important;
          }
        }
      }
      .fc-agendaDay-view {
        .fc-head {
          table {
            margin: 15px 0;
          }
          .fc-day-header {
            display: none;
          }
        }
        .fc-content {
          .fc-title {
            font-size: 14px;
            color: rgb(3, 6, 15);
          }
        }
      }
      .fc-head {
        .fc-day-header,
        .fc-widget-header,
        .fc-head-container {
          border-top-color: #fff;
          border-left-color: #fff;
          border-right-color: #fff;
        }
        table {
          margin: 10px 0 15px 0;
          font-size: 15px;
          color: #000;
        }
      }
    }
  }
}
.tip {
  color: $color;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header,
.fc-unthemed .fc-list-heading td {
  background: #edf7ff;
}
</style>
